<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>完善示例</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>

  <body>
    <div id="root">
      <h2 :style="{opacity}">欢迎学习Vue</h2>
      <!-- 自己销毁自己，并且自己处理后事 -->
      <button @click="stop">点我停止变换</button>
    </div>
  </body>

  <script type="text/javascript">
    new Vue({
      el: "#root",
      data: {
        opacity: 1,
      },
      methods: {
        stop() {
          //清除定时器
          //clearInterval(this.timer);
          //销毁VM
          this.$destroy();
        },
      },
      mounted() {
        console.log("页面挂载完毕，执行mounted");
        //在VM身上添加一个属性，便于使用，避免使用关键字或常用字段定义
        this.timer = setInterval(() => {
          this.opacity -= 0.01;
          if (this.opacity <= 0) this.opacity = 1;
        }, 16);
      },
      //销毁钩子方式，更加合理   可处理自己销毁或他人销毁，保证触发
      beforeDestroy() {
        console.log("VM即将被销毁，清除定时器");
        clearInterval(this.timer);
      },
    });
  </script>
</html>
